<template>
	<view class="myCardForm_component">
		<view class="com_card_p">
			<view class="com_card com_view" v-for="(v, i) in showForm" :key="i">
				<view class="com_card_view_tt" v-if="objJudge(v.views_name)">
					{{ v.views_name }}
				</view>
				<view class="com_card_view_cc" v-if="v.views">
					<block v-for="(vv, ii) in v.views" :key="ii">
						<block v-if="vv.formtype == 'map' && vv.show">
							<view class="row_map_view">
								<view class="map_con">
									<map class="map" :scale="11" :latitude="vv.lat" :longitude="vv.lng" :circles="circles" @regionchange="regionchange" @tap="map_tap"></map>
									<!-- :enable-poi="false" -->
								</view>
							</view>
						</block>
						<block v-else>
							<view class="com_card_view" :class="[{ jj_kt_a: ii > 0 }, vv.state, vv.formtype, objJudge(vv.append_class) && vv.append_class]" @click="formClick(vv)">
								<view class="card_ltt">
									{{ vv.title }}
								</view>

								<view class="card_photo" v-if="vv.formtype == 'upload'">
									<myuploadimg
										upload_type="head"
										:url="objJudge(keyForm[vv.key]) ? keyForm[vv.key] : '/static/images/login_in.png'"
										:key_name="vv.key"
										@upload_end="upload_end"
									></myuploadimg>
								</view>

								<view class="card_rvv" v-else-if="vv.formtype == 'text'">
									<view class="r_view_cc">
										<block v-if="vv.state == 'click'">
											<view class="r_view_inp" v-if="objJudge(keyForm[vv.key])">{{ back_key(vv) }}</view>
										</block>
										<block v-else-if="vv.state == 'switch'">
											<view class="form_switch">
												<myswitch :item="vv" :switchon="keyForm[vv.key]" width="70" height="38" padding="4" @switch_click="switchClick"></myswitch>
											</view>
										</block>
										<block v-else>
											<input
												class="r_view_inp"
												:type="objJudge(vv.inptype) ? vv.inptype : 'text'"
												v-model="keyForm[vv.key]"
												:placeholder="vv.placeholder"
												placeholder-class="placeholder"
												:disabled="objJudge(vv.state) && vv.state == 'disable'"
												@blur="formTrigger($event, vv)"
												@confirm="formTrigger($event, vv)"
											/>
										</block>
										<view class="r_view_jt" v-if="vv.state != 'switch'">
											<image class="ii max100" src="/static/images/jt.png" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</block>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'myCardForm',
	props: {
		showForm: {
			type: [Object, Array],
			default() {
				return [];
			},
		},
		keyForm: {
			type: [Object],
			default() {
				return {};
			},
		},
		keyForm_name: {
			type: [String],
			default() {
				return 'page_form';
			},
		},
	},
	watch: {},
	data() {
		return {
			formupdate: true,

			// 测试半径
			circles: [
				{
					latitude: 23.017656,
					longitude: 113.82433,
					color: '#1fd1c24f',
					// 填充颜色
					fillColor: '#1fd1c24f',
					// 圆半径
					radius: 3200,
					strokeWidth: 0,
				},
			],
		};
	},
	mounted() {},
	methods: {
		back_key(v) {
			let b = this.keyForm[v.key];
			if (this.objJudge(v.unit)) {
				b += v.unit;
			}
			return b;
		},
		formTrigger(e, item) {
			console.log(e, 'ee');
			let _this = this;
			if (!this.formupdate) return;
			this.formupdate = false;

			let { state } = item;
			if (state == 'edit') {
				if (_this.objJudge(item.regular)) {
					if (!_this.page_check(e.detail.value, item.regular, 'formupdate')) return;
				} else {
					if (!e.detail.value) {
						_this.formupdate = true;
						return _this.com_msg(item.placeholder);
					}
				}
			}
			let o = {
				value: e.detail.value,
				key: item.key,
				item,
			};
			this.$emit('formChange', o);
			this.$nextTick(() => {
				_this.formupdate = true;
			});
		},

		formClick(item) {
			let _this = this;
			if (this.objJudge(item.state) && item.state == 'click') {
				this.$emit('formClick', {
					item,
					form: _this.keyForm_name,
				});
			}
		},
		switchClick(v) {
			let { item } = v;
			let _this = this;
			this.$emit('formClick', {
				item,
				form: _this.keyForm_name,
			});
		},
		upload_end(e) {
			let { key, value, item } = e;
			let _this = this;
			_this.$emit('formChange', {
				value,
				key,
				form: _this.keyForm_name,
				item,
			});
		},

		regionchange(e) {
			console.log(e, 'regionchange');
		},

		map_tap(e) {
			console.log(e, 'map_tap');
		},
	},
};
</script>

<style lang="scss">
.com_card_p {
	padding: 20rpx 30rpx;
}

// 卡片公共样式
.com_card {
	.com_card_view_tt {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}

	.com_card_view_cc {
		background: #ffffff;
		padding-left: 20rpx;
		border-radius: 20rpx;
		-webkit-border-radius: 20rpx;
		-moz-border-radius: 20rpx;
		-ms-border-radius: 20rpx;
		-o-border-radius: 20rpx;
	}

	.row_map_view {
		padding-right: 16rpx;
	}

	.map_con {
		position: relative;
		border-radius: 20rpx;
		height: 292rpx;
		overflow: hidden;

		-webkit-backface-visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);

		.map {
			border-radius: 20rpx;
			// 去除底部水印
			position: relative;
			z-index: 5;
			width: 100%;
			height: 100%;

			// height: calc(100% + 168rpx);
			// top: 50%;
			// transform: translateY(-50%);
		}
	}

	.com_card_view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-right: 20rpx;
		// min-height: 100rpx;
		padding: 25rpx 16rpx 25rpx 0;

		&.disable {
			.r_view_jt {
				opacity: 0;
			}
		}

		&.hasinp {
			flex-direction: column;
			align-items: flex-start;

			.card_rvv {
				width: 100%;
				margin-top: 20rpx;
			}
		}

		&.hide_line {
			&::after,
			&::before {
				display: none;
			}
		}

		.card_photo {
			width: 90rpx;
			height: 90rpx;
			overflow: hidden;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms-border-radius: 50%;
			-o-border-radius: 50%;
		}

		.card_ltt {
			font-size: 32rpx;
			font-weight: bold;
			color: #2e3443;
			flex-shrink: 0;
			padding-right: 20rpx;
		}

		.card_rvv {
			flex: 1;
		}

		.r_view_cc {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.r_view_inp {
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
			text-align: right;
			width: 80%;
		}

		.r_view_jt {
			margin-left: 4rpx;
			width: 22rpx;
			height: 22rpx;
		}

		.yzm {
			margin-left: 32rpx;
			padding: 0 16rpx 0 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #1fd1c2;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.b_inp {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: #2e3443;

			// display: flex;
			// align-items: center;

			// .r_view_inp {
			// 	font-size: 32rpx;
			// 	font-weight: 400;
			// 	color: #999999;
			// }

			// .r_view_jt {
			// 	margin-left: 10rpx;
			// 	width: 20rpx;
			// 	height: 20rpx;
			// }
		}

		// min-height: 100;
	}
}
</style>
